<template>
  <div class="goods">
    <swiper :recommend="recommend" />
    <div class="box">
      <!-- 左 -->
      <scroll class="content1">
        <div class="left">
          <div
            @click="selectMenu(index)"
            :class="{'active':currentIndex===index}"
            class="left-item"
            v-for="(item,index) in menu"
            :key="index"
          >
            <img class="left-icon" v-if="item.icon_url" :src="item.icon_url" alt />
            <span>{{item.name}}</span>
          </div>
        </div>
      </scroll>
      <!-- 右 -->
      <scroll class="content2" ref="scroll" :probe-type="3" :pullingup="true" @scroll="scroll">
        <div class="right" ref="foodScroll">
          <div  class="right-item" v-for="(item,index) in menu" :key="index">
            <div class="cetregory-title">
              <span class="cetregory-name">{{item.name}}</span>
              <span class="cetregory-description">{{item.description}}</span>
            </div>
            <div @click="handlerInfo(food)" class="fooddetails" v-for="(food,index) in item.foods" :key="index">
              <img class="image_path" :src="food.image_path" alt />
              <div class="text">
                <h4 class="title">{{food.name}}</h4>
                <p class="description">{{food.description}}</p>
                <span class="month_sales">月售：{{food.month_sales}}份</span>
                <span class="satisfy_rate">好评率：{{food.satisfy_rate}}%</span>
                <div class="price_wrap">
                  <span class="price">￥{{food.specfoods[0].price}}</span>
                  <cart-controll :food="food" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroll>
    </div>
    <shop-cart :shopInfo='shopInfo'/>
    <food-detail :foodDetail='foodDetail' :showFood='showFood' @foodClose='showFood=false'/>
  </div>
</template>

<script>
import CartControll from "./GoodsChild/CartControll";
import Swiper from "./GoodsChild/Swiper";
import ShopCart from "./GoodsChild/ShopCart";
import FoodDetail from "./GoodsChild/FoodDetail";
import Scroll from "@/components/scroll/Scroll";
export default {
  name: "goods",
  components: {
    Swiper,
    CartControll,
    Scroll,
    ShopCart,
    FoodDetail
  },
  data() {
    return {
      shopInfo:{},
      recommend: [],
      menu: [],
      listHeight: [],
      scrollY: 0,
      rst:{},
      foodDetail:{},
      showFood: false,
    };
  },
  created() {
    this.getData();
  },
  computed: {
    currentIndex: {
      get() {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i + 1];
          if (this.scrollY >= height1 && this.scrollY < height2) {
            return i;
          }
          continue;
        }

      },
      set(val) {
        console.log(val);   
        return val;
      }
    }
  },
  methods: {
    getData() {
      axios("/api/profile/batch_shop").then(res => {
        res.recommend[0].items.forEach(item => {
          item.count = 0;
        });
        res.menu.forEach(item => {
          item.foods.forEach(food => {
            food.count = 0;
          });
        });
        this.shopInfo = res;
        this.recommend = res.recommend;
        this.menu = res.menu;
        this.rst=res.rst
        this.$nextTick(() => {
          this.calcHeight();
        });
      });
    },
    selectMenu(index) {
      let foodList = this.$refs.foodScroll.getElementsByClassName("right-item");
      let el = foodList[index];
      this.$refs.scroll.scrollToElement(el, 250);
    },
    scroll(pos) {
      this.scrollY = Math.abs(pos.y);
    },
    calcHeight() {
      var foodList = this.$refs.foodScroll.getElementsByClassName("right-item")
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < foodList.length-1; i++) {
        let item = foodList[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      } 
    },
    // 详情
    handlerInfo(item){
      this.foodDetail=item
      this.showFood=true
    }
  }
};
</script>

<style scoped>
.shop-cart{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.goods {
  position: relative;
  height: calc(100% - 10.66666vw);
}
.box {
  display: flex;
  width: 100%;
  height: calc(100vh - 290px);
}
.content1 {
  height: calc(100vh - 290px);
  overflow: hidden;
  width: 20%;
}
.content2 {
  height: calc(100vh - 290px);
  overflow: hidden;
  width: 80%;
}
.left {
  width: 100%;
  height: 100%;
}
.right {
  width: 100%;
}
.left-icon {
  width: 13px;
  height: 13px;
  margin-right: 5px;
}
.left-item {
  width: 100%;
  height: 35px;
  font-size: 13px;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  padding: 0 10px;
  color: #666;
  border-left: 0.08rem solid transparent;
}
.image_path {
  width: 95px;
  height: 95px;
  border: 1px solid #ccc;
  flex: none;
}
.right-item {
  width: 100%;
}
.fooddetails {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 0 10px;
}
.cetregory-name {
  font-size: 14px;
  font-weight: 600;
  margin-right: 10px;
}
.cetregory-description {
  font-size: 12px;
  color: #999;
}
.text {
  margin-left: 10px;
  flex: 1;
}
.title {
  font-size: 14px;
}
.description {
  /*  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 12px;
  color: #999;
  margin-top: 10px;
  line-height: 16px;
}
.month_sales,
.satisfy_rate {
  font-size: 12px;
  color: #999;
  line-height: 20px;
}
.satisfy_rate {
  margin-left: 10px;
}
.price_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.price {
  color: #ff5339;
  font-size: 16px;
}
.cetregory-title {
  padding: 0 10px;
  line-height: 35px;
}
.active {
  font-weight: 600;
  border-left: 3px solid #009eef;
  background-color: #fff;
}
</style>